<template>
  <div class="coursehw-container">
    <div class="position">
      <span>当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>数据查询</el-breadcrumb-item>
        <el-breadcrumb-item>作业情况查询</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <el-input
        placeholder="请输入课程姓名"
        v-model="input"
        clearable
      ></el-input>
      <el-button type="primary" @click="searchbyname">查询</el-button>
      <el-button type="primary" @click="Sethw">布置作业</el-button>
    </div>
    <div class="hwinfo-table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="150"></el-table-column>
        <el-table-column
          prop="courseid"
          label="课程ID"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="coursename"
          label="课程名称"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="hwid"
          label="作业ID"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="posttime"
          label="发布日期"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="finaltime"
          label="截止日期"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="submitnumber"
          label="提交人数"
          width="150"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >查看详细情况</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        ref="pagination"
        :pagesize="pagesize"
        :total="total"
        v-if="total"
        @changepage="changetable"
      ></pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      input: "",
      username: "",
    };
  },
  computed: {
    ...mapState({
      tableData: (state) => {
        if (Array.isArray(state.teacher.homeworkinfo.tabledata)) {
          if (
            state.teacher.homeworkinfo.pagesize &&
            state.teacher.homeworkinfo.currentpage
          ) {
            let currentpage = state.teacher.homeworkinfo.currentpage;
            let pagesize = state.teacher.homeworkinfo.pagesize;
            let tableData = state.teacher.homeworkinfo.tabledata.slice(
              //实现分页
              (currentpage - 1) * pagesize,
              currentpage * pagesize
            );
            return tableData;
          } else {
            return state.teacher.homeworkinfo.tabledata;
          }
        }
      },
      pagesize: (state) => {
        if (state.teacher.homeworkinfo.pagesize) {
          return state.teacher.homeworkinfo.pagesize;
        } else {
          //若无教师审批，则每页显示条数为0
          return 0;
        }
      },
      total: (state) => {
        if (state.teacher.homeworkinfo.total) {
          return state.teacher.homeworkinfo.total;
        } else {
          //若无教师审批，则总数返回为0
          return 0;
        }
      },
      currentpage: (state) => {
        if (state.teacher.homeworkinfo.currentpage) {
          return state.teacher.homeworkinfo.currentpage;
        } else {
          //若无教师审批，则总数返回为0
          return 0;
        }
      },
    }),
  },
  methods: {
    handleEdit(index, row) {
      this.$router.push({
        name: "concrete",
        params: { courseid: row.courseid, hwid: row.hwid },
      });
    },
    Sethw() {
      this.$router.push("/teacher/hwinfo/hwcreate");
    },
    changetable(page) {
      this.$store.dispatch("changecoursehwpage", page);
    },
    searchbyname() {
      let username = localStorage.getItem("username");
      if (this.input) {
        this.$store.dispatch("getcoursehwbyname", {
          username: username,
          coursename: this.input,
        });
      } else {
        this.$store.dispatch("gethomeworkinfo", username);
        this.$emit("changekey");
      }
    },
  },
  mounted() {
    this.username = localStorage.getItem("username");
    this.$store.dispatch("gethomeworkinfo", this.username);
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 50px;
  line-height: 50px;
  display: flex;
  margin-bottom: 10px;
  button {
    margin: 0 20px;
  }
}
.position {
  height: 30px;
  line-height: 30px;
  .el-breadcrumb {
    display: inline-block;
  }
  & > span {
    font-size: 16px;
  }
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
